<template>
<div class="layerRtb layerRtb-threecolumn">
     <three-title :title="{name:'品德'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <div>
            <div class="analyItem" >
                <p class="analyItemTit tx-center">人品</p>
                <div class="analyItemCon">
                    <p class="col-md-12 mb20">
                        <el-checkbox-group  v-model="checkListPeople">
                            <el-checkbox @change="change(18)" label="18"  data-title="待人诚恳，能宽容，不刻薄">厚道</el-checkbox>
                            <el-checkbox @change="change(19)" label="19" data-title="讲究言必行，信必果">守信</el-checkbox>
                            <el-checkbox @change="change(20)" label="20" data-title="有容乃大容纳不同的想法">格局</el-checkbox>
                            <el-checkbox @change="change(21)" label="21" data-title="实事求是，绝不可弄虚作假">务实</el-checkbox>
                            <el-checkbox @change="change(22)" label="22" data-title="虚心请假，不恃才傲物">谦虚</el-checkbox>
                            <el-checkbox @change="change(23)" label="23" data-title="坚持真理，遇到问题要有自己的见解">原则</el-checkbox>
                            <el-checkbox @change="change(24)" label="24" data-title="认准的事，干方百计把它完成好">执著</el-checkbox>
                        </el-checkbox-group>
                    </p>
                    <p class="col-md-12">
                        <span class="cLightGray pr8 col-md-1">备注:</span>
                        <span class="col-md-8">
                         <el-input  v-model="inputPeople" placeholder="输入备注"></el-input>
                        </span>
                        <span class="col-md-22 ">
                         <el-button class="fr"  @click="confirm(inputPeople,1)" type="primary">确定</el-button>
                        </span>
                    </p>
                     <span style="top:20%" :class="['circlemark', peopleList.isPresence==null ? 'circlemark-purple' : 'circlemark-lightGreen']" >{{peopleList.isPresence==null?'待':'完'}}</span>


                </div>
            </div>
            <div class="analyItem" >
                <p class="analyItemTit tx-center">管品</p>
                <div class="analyItemCon">
                    <p class="col-md-12 mb20">
                        <el-checkbox-group  v-model="checkListGuan">
                            <el-checkbox @change="changeGoods(25)" label="25" >原则性</el-checkbox>
                            <el-checkbox @change="changeGoods(26)" label="26" >责任心</el-checkbox>
                            <el-checkbox @change="changeGoods(27)" label="27" >团队意识</el-checkbox>
                            <el-checkbox @change="changeGoods(28)" label="28" >人格魅力</el-checkbox>
                        </el-checkbox-group>
                    </p>
                    <p class="col-md-12">
                        <span class="cLightGray pr8 col-md-1">备注:</span>
                        <span class="col-md-8">
                         <el-input  v-model="inputGuan" placeholder="输入备注"></el-input>
                        </span>
                        <span class="col-md-22 ">
                         <el-button class="fr"  @click="confirm(inputGuan,2)" type="primary">确定</el-button>
                        </span>
                    </p>
                     <span style="top:20%" :class="['circlemark', goodsList.isPresence==null ? 'circlemark-purple' : 'circlemark-lightGreen']" >{{goodsList.isPresence==null?'待':'完'}}</span>

                </div>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <p class="col-md-10">
                    <span class="col-md-1 cLightGray ">备注</span>
                    <span  class="col-md-8 lh20">
                        <el-input v-model="inputHandel"  placeholder="请输入处理备注..."></el-input>
                    </span>
                </p>
                      <span style="top:20%" :class="['circlemark', PDList.isPresence==null ? 'circlemark-purple' : 'circlemark-lightGreen']" >{{PDList.isPresence==null?'待':'完'}}</span>

            </div>
        </div>
        <div  class="tx-center">
            <el-button  @click="confirm(inputHandel,3)" type="primary">保存</el-button>
        </div>
    </div>

</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { saveTrickData } from '../../Resources/Api'
export default {

    data () {
        return {
            PDList: {},
            peopleList: {},
            goodsList: {},
            inputHandel: '',
            checkListPeople: [],
            arrPeople: [],
            inputPeople: '',
            checkListGuan: [],
            arrGoods: [],
            inputGuan: ''
        }
    },

    computed: {
        ...mapGetters(['leftInfo', 'userInfo'])
    },
    created () {
        this.PDList = this.$route.query.PDList
        this.break()
    },
    methods: {
        change (val) {
            this.arrPeople.forEach(item => {
                if (Number(item) === val) {
                    this.saveTrickData(null, val, 0)
                }
            })
        },
        changeGoods (val) {
            this.arrGoods.forEach(item => {
                if (Number(item) === val) {
                    this.saveTrickData(null, val, 0)
                }
            })
        },
        break () {
            // 综合备注
            if (this.PDList.isPresence !== null) {
                this.inputHandel = this.PDList.isPresence[0].remake
            }
            this.PDList.stageMediumType.forEach(element => {
                if (Number(element.exclusiveId) === 8) {
                    this.$nextTick(() => {
                        this.peopleList = element
                    })
                    // 人品选型
                    element.stageSmallType.forEach(val => {
                        if (val.isPresence !== null) {
                            this.checkListPeople.push(String(val.exclusiveId))
                            this.arrPeople.push(String(val.exclusiveId))
                        } else {
                            this.inputPeople = ''
                        }
                    })
                    // 人品备注
                    if (element.isPresence !== null) {
                        this.inputPeople = element.isPresence[0].remake
                    }
                } else {
                    this.$nextTick(() => {
                        this.goodsList = element
                    })
                    // 管品选项
                    element.stageSmallType.forEach(val => {
                        if (val.isPresence !== null) {
                            this.checkListGuan.push(String(val.exclusiveId))
                            this.arrGoods.push(String(val.exclusiveId))
                        } else {
                            this.inputGuan = ''
                        }
                        // 管品备注
                        if (element.isPresence !== null) {
                            this.inputGuan = element.isPresence[0].remake
                        }
                    })
                }
            })
        },
        saveTrickData (input, val, deflg) {
            saveTrickData({
                user_card_no: this.leftInfo.cardNo, // 卡号
                userName: this.leftInfo.userName, // 姓名
                remake: input, // 备注
                operatorCard: this.userInfo.as_cardNo, // 操作人
                operatorName: this.userInfo.as_userName, // 操作人姓名
                exclusiveId: val, // 专属ID
                delFlag: deflg
            }).then(res => {
                if (deflg === 0) {
                    return
                }
                if (res.data.StatusCode === 0) {
                    layer.msg('保存成功')
                }
            }).catch(error => {
                console.log(error)
            })
        },


        confirm (input, flg) {
            if (flg === 1) {
                if (input === '') {
                    layer.msg('输入备注')
                    return
                }
                if (Number(this.checkListPeople.length) === 0) {
                    layer.msg('尚未选择')
                    return
                }
                this.checkListPeople.forEach(item => {
                    this.saveTrickData(null, item)
                })
                this.saveTrickData(input, 8)
            }
            if (flg === 2) {
                if (input === '') {
                    layer.msg('输入备注')
                    return
                }
                if (Number(this.checkListGuan.length) === 0) {
                    layer.msg('尚未选择')
                    return
                }
                this.checkListGuan.forEach(element => {
                    this.saveTrickData(null, element)
                })
                this.saveTrickData(input, 9)
            }
            if (flg === 3) {
                if (input === '') {
                    layer.msg('输入备注')
                    return
                }
                if (this.peopleList.isPresence !== null && this.goodsList.isPresence !== null) {
                    this.saveTrickData(input, 2)
                } else {
                    layer.msg('尚未完善信息')
                }
            }
        }
    },
    watch: {
        leftInfo () {
        },
        $route () {
        }
    }
}
</script>
